<template>
  <Row :gutter="10">
    <Col :span="12">
      <database @change="changeSchema" :dbIndex="dbIndex" :schema="schema" />
    </Col>
    <Col :span="12" style="text-align: right; padding: 0" class="btn-group">
      <Button :type="showType == 'Columns' ? 'primary' : 'default'" @click="showType = 'Columns'"><ProfileOutlined /> 字段</Button>
      <Button :type="showType == 'Datas' ? 'primary' : 'default'" @click="showType = 'Datas'"><DatabaseOutlined /> 数据</Button>
      <Button :type="showType == 'DDL' ? 'primary' : 'default'" @click="showType = 'DDL'"><FileTextFilled /> 脚本</Button>
      <Button :type="showType == 'DML' ? 'primary' : 'default'" @click="showType = 'DML'"><FileOutlined /> DML语句</Button>
      <Button :type="showType == 'Entity' ? 'primary' : 'default'" @click="showType = 'Entity'"><CodeOutlined /> 实体</Button>
    </Col>
  </Row>
  <Row :gutter="10" style="margin-top: 10px">
    <Col span="6">
      <tables :dbIndex="dbIndex" :schema="schema" :dbType="dbType" @change="changeTable" />
    </Col>
    <Col span="18" class="detail" :style="{ height: detailHeight + 'px' }">
      <component :is="detail"></component>
    </Col>
  </Row>
</template>

<script setup>
  import tables from './components/Tables.vue';
  import database from './components/Database.vue';
  import columns from './table/Columns.vue';
  import ddl from './table/DDL.vue';
  import dmls from './table/DML.vue';
  import entity from './table/Entity.vue';
  import datas from './table/Datas.vue';

  import { useStore } from 'vuex';
  import { useRoute } from 'vue-router';
  import { ref, reactive, h, computed, onMounted } from 'vue';
  import { Row, Col, Button, Tag } from 'ant-design-vue';
  import { ProfileOutlined, DatabaseOutlined, FileTextFilled, FileOutlined, CodeOutlined } from '@ant-design/icons-vue';

  import { fillDatas } from '@/libs/helpers.js';

  const $store = useStore();
  const $route = useRoute();

  const dbIndex = ref('');
  const dbType = ref('');
  const schema = ref('');
  const tableName = ref('');
  const tableDetail = reactive({});
  const showType = ref('Columns');

  const detailHeight = computed(() => {
    return $store.state.area.content.height - 88;
  });

  const detail = computed(() => {
    let props = {
      dbIndex: dbIndex.value,
      dbType: dbType.value,
      schema: schema.value,
      tableName: tableName.value,
      tableDetail: tableDetail
    };

    switch (showType.value) {
      case 'Datas':
        return h(datas, props);

      case 'DDL':
        return h(ddl, props);

      case 'DML':
        return h(dmls, props);

      case 'Entity':
        return h(entity, props);

      default:
        return h(columns, props);
    }
  });

  function changeSchema(data) {
    dbIndex.value = data.dbIndex;
    dbType.value = data.type;
    schema.value = data.schema;
  }

  function changeTable(table) {
    tableName.value = table.table_name;

    fillDatas(tableDetail, table);
  }

  onMounted(() => {
    dbIndex.value = $route.params.dbIndex;
    dbType.value = $route.query.dbtype;
    schema.value = $route.params.schema;
  });
</script>

<style lang="less" scoped>
  .detail {
    background: #fff;
    border-radius: 8px;
    padding-top: 0;
    padding-bottom: 0;

    :deep(.ant-row) {
      margin-top: 2px;
    }

    :deep(pre) {
      width: 100%;
      background: #f6f6f6;
      padding: 5px 10px;
      margin-left: -3px;
      margin-right: -1px;
      margin-bottom: 0;
      overflow-y: auto;
    }
  }
</style>
